<template>
    <el-dialog :title="editOrAdd=='edit' ? '编辑工作服信息' : '新增工作服'" :visible="dialogEdit" @close="close">
        <el-form ref="form" label-width="100px" :rules="rules" :model="form">
            <el-form-item label="所属医院" prop="hid">
                <el-select clearable class="filter-item" :disabled="editOrAdd=='edit'" placeholder="请选择所属医院" v-model="form.hid" style="width: 100%;">
                    <el-option v-for="(item, index) in hospitalOptions" :key="item.name" :label="item.name" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="所属医生" prop="doctorId">
                <el-select clearable class="filter-item" :disabled="editOrAdd=='edit'" placeholder="请选择所属医生" v-model="form.doctorId" style="width: 100%;">
                    <el-option v-for="(item, index) in doctorOptions" :key="item.name" :label="item.name" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="所属分类" prop="categoryId">
                <el-select clearable class="filter-item" placeholder="请选择所属分类" v-model="form.categoryId" style="width: 100%;">
                    <el-option v-for="(item, index) in categoryOptions" :key="item.name" :label="item.name" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <!--<el-form-item label="洗涤码" prop="barCode">-->
                <!--<el-input v-model="form.barCode" placeholder="请输入洗涤码"></el-input>-->
            <!--</el-form-item>-->
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="onSubmit('form')">保存</el-button>
            <el-button plain @click="close">取消</el-button>
        </span>
    </el-dialog>
</template>

<script>
  import { fetchHospitalList } from '@/api/hospital'
  import { categoryGetList } from '@/api/category'
  import { doctorGetList } from '@/api/doctor'
  import { doctorClothesGetByCode, doctorClothesUpdate, doctorClothesAdd } from '@/api/cloth'

  // todo 编辑的时候提示热塑码重复
  export default {
    name: 'ClothManage',
    props: ['clothCode', 'editOrAdd', 'dialogEdit'],
    data() {
      return {
        defaultForm: {
          doctorId: '',
          categoryId: '',
          // barCode: '',
          hid: ''
        },
        form: {
          doctorId: '',
          categoryId: '',
          // barCode: '',
          hid: ''
        },
        isEdit: false,
        clothesInfo: {},
        hospitalOptions: [],
        doctorOptions: [],
        categoryOptions: [],
        rules: {
          // barCode: [
          //   { required: true, message: '请输入洗涤码', trigger: 'blur' },
          //   { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
          // ],
          doctorId: [
            { required: true, message: '请选择所属医生', trigger: 'blur' }
          ],
          hid: [
            { required: true, message: '请选择所属医院', trigger: 'blur' }
          ],
          categoryId: [
            { required: true, message: '请选择所属分类', trigger: 'blur' }
          ]
        }
      }
    },
    created: function() {
      this.form = this.defaultForm
      this.getHospitals()
    },
    watch: {
      dialogEdit(val) {
        if (val) {
          this.initForm()
        }
      },
      'form.hid'(val) {
        this.form.categoryId = ''
        this.form.doctorId = ''
        this.categoryOptions = []
        this.doctorOptions = []
        if (val) {
          this.getCategory()
          this.getDoctors()
        }
      }
    },
    methods: {
      getCategory() {
        categoryGetList({ page: 1, size: 500, type: 2, hid: this.form.hid }).then(response => {
          this.categoryOptions = response.data.list || []
          this.form.categoryId = this.clothesInfo.categoryId
        })
      },
      getDoctors() {
        doctorGetList({ page: 1, size: 500, hid: this.form.hid }).then(response => {
          this.doctorOptions = response.data.list || []
          this.form.doctorId = this.clothesInfo.doctorId
        })
      },
      getHospitals() {
        fetchHospitalList({ page: 1, size: 500 }).then(response => {
          this.hospitalOptions = response.data.list || []
        })
      },
      initForm() {
        if (this.editOrAdd === 'add') {
          this.isEdit = false
          this.form = this.defaultForm
          this.$nextTick(() => {
            this.$refs['form'] && this.$refs['form'].resetFields()
          })
        } else {
          this.isEdit = true
          this.getInfo()
          this.$nextTick(() => {
            this.$refs['form'] && this.$refs['form'].clearValidate()
          })
        }
      },
      getInfo() {
        doctorClothesGetByCode({ code: this.clothCode }).then(response => {
          if (response) {
            this.form = response.data
            this.clothesInfo = Object.assign({}, response.data)
          }
        })
      },
      close() {
        this.$emit('update:dialogEdit', false)
      },
      onSubmit(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (this.isEdit) {
              doctorClothesUpdate(this.form).then(response => {
                if (response) {
                  this.$message({ message: '修改工作服成功', type: 'success', showClose: true })
                  this.$emit('update:dialogEdit', false)
                  this.$emit('refreshList')
                }
              })
            } else {
              this.form.region = this.region
              doctorClothesAdd(this.form).then(response => {
                if (response) {
                  this.$message({ message: '添加工作服成功', type: 'success', showClose: true })
                  this.$emit('update:dialogEdit', false)
                  this.$emit('refreshList')
                }
              })
            }
          } else {
            console.log('error submit!!')
            return false
          }
        })
      }
    }
  }
</script>

